<template>
	<div class="footer">
		<div class="con-tit" @click="bqins()">上一题</div>
		<div class="collect" @click="toggleCollect">
			<img :src="isFavorite? Favorited : Favorite" alt />
			<span>收藏</span>
		</div>
		<div class="con-tit" @click="bqinx()">下一题</div>
	</div>
</template>

<script>
export default {
	name: 'myfooter',
	data() {
		return {
			isFavorite: false, // 是否已收藏
			Favorite: require('@/assets/collect.png'),
			Favorited: require('@/assets/collected.png'),
		}
	},
	methods: {
		toggleCollect() {
			this.$parent.toggleCollect()
		},
		bqins() {
			this.$parent.bqins()
		},
		bqinx() {
			this.$parent.bqinx()
		},
	},
}
</script>

<style lang="less" scoped>
.footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1.173333rem;
	line-height: 1.173333rem;
	background-color: #ff8333;
	display: flex;
	justify-content: space-around;
	color: #fff;
	.con-tit {
	}
	.collect {
		> img {
			vertical-align: middle;
			width: 0.5rem;
			height: 0.5rem;
		}
		> span {
			display: inline-block;
			vertical-align: middle;
		}
	}
}
</style>
